<template>
  <div>
    <el-card class="box-card" style="height:800px">
      <div slot="header" class="clearfix">
        <span>
          <navigation />
        </span>
      </div>
      <div class="list" id="taskScore">
        <el-scrollbar class="page-component__scroll" style="height:100%">
          <div style="height:700px;">
            <el-table
              :header-cell-style="{ background: '#f5f5f5' }"
              border
              :data="tableData"
              style="width: 100%"
              size="small"
            >
              <el-table-column align="center" width="160" prop="subtasksName" label="指标任务名称"></el-table-column>
              <el-table-column align="center" width="160" prop="departmentName" label="配合责任单位"></el-table-column>
              <el-table-column align="center" label="一季度">
                <el-table-column align="center" width="60" prop="oneQuarterNumber" label="任务量"></el-table-column>
                <el-table-column align="center" width="60" prop="oneQuarterDegree" label="实际完成量"></el-table-column>
                <el-table-column align="center" label="本季度完成率">
                  <template slot-scope="scope">
                    {{
                    decimal(scope.row.quaterDegree1)
                    }}
                  </template>
                </el-table-column>
                <el-table-column align="center" label="全年目标完成率">
                  <template slot-scope="scope">
                    {{
                    decimal(scope.row.allDegree1)
                    }}
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column align="center" label="二季度">
                <el-table-column align="center" width="60" prop="twoQuarterNumber" label="任务量"></el-table-column>
                <el-table-column align="center" width="60" prop="twoQuarterDegree" label="实际完成量"></el-table-column>
                <el-table-column align="center" label="本季度完成率">
                  <template slot-scope="scope">
                    {{
                    decimal(scope.row.quaterDegree2)
                    }}
                  </template>
                </el-table-column>
                <el-table-column align="center" label="全年目标完成率">
                  <template slot-scope="scope">
                    {{
                    decimal(scope.row.allDegree2)
                    }}
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column align="center" label="三季度">
                <el-table-column align="center" width="60" prop="threeQuarterNumber" label="任务量"></el-table-column>
                <el-table-column align="center" width="60" prop="threeQuarterDegree" label="进度"></el-table-column>
                <el-table-column align="center" label="本季度完成率">
                  <template slot-scope="scope">
                    {{
                    decimal(scope.row.quaterDegree3)
                    }}
                  </template>
                </el-table-column>
                <el-table-column align="center" label="全年目标完成率">
                  <template slot-scope="scope">
                    {{
                    decimal(scope.row.allDegree3)
                    }}
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column align="center" label="全年">
                <el-table-column align="center" width="60" prop="allNumber" label="任务量"></el-table-column>
                <el-table-column align="center" width="60" prop="allDegree" label="实际完成量"></el-table-column>
                <el-table-column align="center" label="本季度完成率">
                  <template slot-scope="scope">
                    {{
                    decimal(scope.row.quaterDegree4)
                    }}
                  </template>
                </el-table-column>
                <el-table-column align="center" label="全年目标完成率">
                  <template slot-scope="scope">
                    {{
                    decimal(scope.row.allDegree4)
                    }}
                  </template>
                </el-table-column>
              </el-table-column>
            </el-table>
          </div>
        </el-scrollbar>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
    };
  },
  mounted() {
    this.subtasksId = this.$route.query.id;
    this.getListByPage();
  },
  methods: {
    // 百分号
    decimal(val) {
      console.log(val);
      if (val) {
        let _val = val * 100;
        _val = _val.toFixed(2);
        return _val + "%";
      }
    },
    // 获取数据列表
    getListByPage() {
      console.log(this.subtasksId);
      let _obj = {
        subtasksId: +this.subtasksId,
      };
      this.$axios
        .post(`/deptTask/getList`, _obj, 2)
        .then((res) => {
          if (res.code == 200) {
            console.log(res);
            this.tableData = res.data;
            // this.total = res.data.total;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
<style scoped></style>
